<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!DOCTYPE html>
	<html lang="en" class="no-ie" style="overflow:hidden;">
		<head>
			<meta charset="UTF-8">
			<title>近7天进场分析</title>
			<script>
				"object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue.interface = {},
					ue.interface.broadcast = function(e, t) {
						if ("string" == typeof e) {
							var o = [e, ""];
							void 0 !== t && (o[1] = t);
							var n = encodeURIComponent(JSON.stringify(o));
							"object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "",
								"#" + n), history.pushState({}, "", "#" + encodeURIComponent("[]"))) : (document.location
								.hash = n, document.location.hash = encodeURIComponent("[]"))
						}
					}) : function(e) {
					ue.interface = {}, ue.interface.broadcast = function(t, o) {
						"string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ""))
					}
				}(ue.interface), (ue4 = ue.interface.broadcast);
			</script>
			<script src="./dist/echarts.min.js"></script>
			<script src="./static/js/jquery.min.js"></script>
			<script>
				$(function() {
					ue4("getSize", {
						mes: "get windows size"
					});
					ue4("getColor", {
						mes: "get all color"
					});
					ue4("getData", {
						mes: "get all data"
					});
					ue4("beginSize", {
						mes: BeginSize[0],
						mes2: BeginSize[1]
					});
					ue4("beginSizeY", {
						mes: BeginSize
					});
				});
				/*$(function () {
				    
				});*/
			</script>
			<style>
				* {
					margin: 0;
					padding: 0;
				}
			</style>
		</head>
		<body>
			<div id="main"></div>
			<!--
		dataTemp1: y轴数值;dataTemp2: x轴标题
		-->
			<script>
				let BeginSize = [429.62, 211.15];
				let myChart = null;
				let myColor = ['#00CC33', '#44DFDB', '#675bba'];
				let dataBar= [15, 7, -10, -12, -15];
				let dataLine= [650, 600, 550, 560, 530];
				let dataTitle = ['11-15','11-16','11-17','11-18','11-19']

				function fresh() {
					let changeBar=[]
					dataBar.forEach(item => {
						let color='rgba(255, 0, 0, 0.4)'
						if(item<0){
							color='rgba(97, 255, 160, 0.4)'
						}
						changeBar.push({
							value: item,
							itemStyle: {
								normal: {
									color: color
								}
							},
							
						})
					})
					let option = {
						backgroundColor: '#031026',
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							top: '25%',
							containLabel: true
						},
						xAxis: [{
							splitLine: {
								show: false
							},
							axisLine: {
								show: true,
								lineStyle: {
									type: 'solid',
									color: 'rgba(112, 112, 112, 1)',
									width: 1
								}
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								color: '#FFFFFF',
								fontSize: 10,
								interval: 0
							},
							data: dataTitle,
							type: 'category',
							show: true,
						}],
						yAxis: [{
								splitLine: {
									show: true,
									lineStyle: {
										type:'dotted',
										color: 'rgba(112, 112, 112, 0.8)',
										width: 1
									}
								},
								axisLine: { //y轴
									show: true,
									lineStyle: {
										type: 'solid',
										color: 'rgba(112, 112, 112, 1)',
										width: 1
									}
								},
								type: 'value',
								axisTick: {
									show: false
								},
								axisLabel: {
									color: '#FFFFFF',
									fontSize: 11,
									margin: 5,
								},
							},
							{
								splitLine: {
									show: false,
									lineStyle: {
										// type:'dotted',
										color: 'rgba(255, 255, 255, 0.2)',
										width: 1
									}
								},
								axisLine: { //y轴
									show: false,
									lineStyle: {
										type: 'solid',
										color: '#FFFFFF',
										width: 1
									}
								},
								type: 'value',
								axisTick: {
									show: false
								},
								axisLabel: {
									color: '#FFFFFF',
									fontSize: 11,
									margin: 5,
									formatter: '{value} %'
								},
							}
						],
						series: [{
								name: 'Evaporation',
								type: 'line',
								data: dataLine,
								yAxisIndex: 0,
								smooth: true, //平滑曲线显示
								symbol: "circle", //标记的图形为实心圆
								symbolSize: 5, //标记的大小
								itemStyle: {
									normal: {
										color: '#38ACFF',
										borderColor: '#FFFFFF', //圆点透明 边框
										borderWidth: 1
									},
								},
								
							},
							{
								// name: 'Temperature',
								type: 'bar',
								yAxisIndex: 1,
								data: changeBar,
								barWidth: 22,
								markLine: {
									symbol: ['none', 'none'],
									silent: true,
									data: [{
										yAxis: 0,
										lineStyle: {
											color: 'rgba(97, 255, 160, 0.8)',
											type: 'solid'
										},
										label:{
											show: false
										}
									}]
								},
							}
						]
					};
					myChart = echarts.init(document.getElementById('main'));
					myChart.setOption(option);
				}

				fresh();


				//浏览器测试用
				change(BeginSize[0], BeginSize[1]);


				function change(x, y) {
					let div = document.getElementById("main");
					//alert("I am an alert box!!");
					div.style.width = x + "px";
					div.style.height = y + "px";
					var myOption = myChart.getOption();
					myChart.resize();
					let types = []
					myOption.series.forEach((item) => {
						types.push(item.type)
					})
					return types
				}


				/************下面数据***********/
				ue.interface.TransData1 = function(data) {
					dataTemp1 = data;
					fresh();
				};
			</script>
		</body>
	</html>

	<body>
	</body>
</html>
